<template>
  <el-card>
    <Headers
      :inp-show="true"
      :btn-show="true"
      btn-text="添加商品"
      @onShowhickness="onShowhickness"
      @onSerach="onSerach"
    />
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      border
      stripe
    >
      <el-table-column type="index" />
      <el-table-column prop="goods_name" label="商品名称" width="700" />
      <el-table-column prop="goods_price" label="商品价格(元)" />
      <el-table-column prop="goods_weight" label="商品重量" />
      <el-table-column prop="add_time" label="创建时间" />
      <el-table-column label="操作" width="120">
        <template v-slot="{row}">
          <el-button type="primary" icon="el-icon-edit" size="small" />
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="small"
            @click="open(row.goods_id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="data.pagenum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="data.pagesize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="data.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script>
import Headers from '@/components/Headers'
import { formList, removeGoods } from '@/api/goods'
export default {
  name: 'Form',
  components: { Headers },
  props: {},
  data() {
    return {
      tableData: [],
      currentPage4: 4,
      data: {
        query: null,
        pagenum: 1,
        pagesize: 10,
        total: null,
        items: null
      }
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() {
    this.formList()
  },
  mounted() {},
  methods: {
    async formList() {
      try {
        const { data } = await formList(this.data)
        this.tableData = data.data.goods
        this.data.total = data.data.total
        this.data.pagenum = Number(data.data.pagenum)
        clearTimeout(this.items)
        this.items = setTimeout(() => {
          this.$message.success('获取列表成功！~')
        }, 500)
      } catch (error) {
        console.log(error)
      }
    },
    handleSizeChange(val) {
      this.data.pagesize = val
      this.formList()
    },
    handleCurrentChange(val) {
      this.data.pagenum = val
      this.formList()
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await removeGoods(id)
          this.formList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    onShowhickness() {
      this.$router.push('/form/add')
    },
    onSerach(value) {
      this.data.query = value
      this.formList()
    }
  }
}
</script>

<style scoped></style>
